<template>
	<div class="footer">
		<div class="todo-count">共<strong>{{ lastLength }}</strong>条未完成任务 </div>
		<van-space>
			<van-button size="small" @click.prevent="updateStatus('all')"
				:type="status === 'all'?'primary':''">全部</van-button>
			<van-button size="small" @click.prevent="updateStatus('active')"
				:type="status === 'active'?'primary':''">待办</van-button>
			<van-button size="small" @click.prevent="updateStatus('completed')"
				:type="status === 'completed'?'primary':''">已完成
			</van-button>
		</van-space>
	</div>
</template>

<script>
	export default {
		props: {
			lastLength: {
				type: Number,
			},
			status: {
				type: String,
			}
		},
		data() {
			return {

			}
		},
		methods: {
			updateStatus(status) {
				this.$emit('updateStatus', status) //emit前一定要加上$
			}
		}
	}
</script>

<style>
	.footer {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		font-size: 15px;
	}

	.todo-count {
		flex: 1;
		text-align: left;
	}
</style>